<!--该组件为承保一张图右侧展示区-->
<template>
  <div class="right-bar-container">
    <!--饼状图组件容器-->
    <div class="pizza-chart-pot">
      <!--使用子组件DossierCard并向其插槽中加入组件PizzaChart-->
      <DossierCard>
        <!--传给子组件的house和bottle两个参数用于区分子组件所用饼状图背景样式-->
        <PizzaChart pizzaBack="house"></PizzaChart>
        <PizzaChart pizzaBack="bottle"></PizzaChart>
      </DossierCard>
    </div>
    <!--柱状图组件容器-->
    <div class="stump-chart-pot">
      <!--使用子组件DossierCard并向其插槽中加入组件StumpChart-->
      <DossierCard>
        <StumpChart></StumpChart>
      </DossierCard>
    </div>

  </div>
</template>

<script>
//引入子组件DossierCard
import DossierCard from "@/views/business/components/DossierCard/index.vue";

//引入子组件PizzaChart
import PizzaChart from "@/views/business/components/PizzaChart/index.vue";

//引入子组件StumpChart
import StumpChart from "@/views/business/components/StumpChart/index.vue";

export default {
  name: "RightBar",
  components:{
    DossierCard,  //注册子组件DossierCard
    PizzaChart,   //注册子组件PizzaChart
    StumpChart    //注册子组件StumpChart
  }
}
</script>

<style lang="scss" scoped>
  //设置RightBar组件容器样式
  .right-bar-container{
    //设置宽高
    width: 90%;
    height: 100%;
    //设置饼状图组件容器样式
    .pizza-chart-pot{
      //设置宽高
      width: 100%;
      height: 63%;
      //background: #BBFFAA;  //仅用于布局查看
    }
    //设置柱状图组件容器样式
    .stump-chart-pot{
      //设置宽高
      width: 100%;
      height: 36%;
      background: #AABBFF;  //仅用于布局查看
    }
  }
</style>
